<template>
    <div class="head-date-wrapper">
        <el-row class="info" :gutter="20">
            <el-col :span="4"><div class="date">{{date}}</div></el-col>
            <el-col :span="4">
                <div class="weather"><a :href="weatherUrl" target="_blank">{{temp}}</a></div>
            </el-col>
            <el-col :span="8" class="f-r" :offset="8">
                <div class="user f-r">
                    <a @click="loginShow" v-if="!currentUser.isLogin"><i class="fa fa-user"></i>&nbsp;登录</a>
                    <div v-else>
                        <a @click="userDetail"><i class="fa fa-user"></i>&nbsp;{{currentUser.username}}&nbsp;&nbsp;&nbsp;</a>
                        <a @click="manageSystem" v-if="showManage"><i class="fa fa-gear"></i>&nbsp;后台管理&nbsp;&nbsp;&nbsp;</a>
                        <a @click="showChangePasswd = true"><i class="fa fa-edit"></i>&nbsp;修改密码&nbsp;&nbsp;&nbsp;</a>
                        <a @click="logout"><i class="fa fa-sign-out"></i>&nbsp;退出</a>
                    </div>
                </div>
            </el-col>
        </el-row>
        <div @click="backHome" class="logo"></div>
        
        <el-dialog title="登录" :visible.sync="dialogFormVisible" width="500px">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" onsubmit="return false;">
                <el-form-item label="密码" prop="password" :label-width="formLabelWidth">
                    <el-input type="password" auto-complete="off" v-model="ruleForm.password" @keyup.enter.native="dologin('ruleForm',$event)" placeholder="请输入登录密码"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="resetForm('ruleForm')">取 消</el-button>
                <el-button type="primary" @click="dologin('ruleForm',$event)">确 定</el-button>
            </div>
        </el-dialog>
        <change-passwd :showChangePasswd="showChangePasswd" @close="showChangePasswd=false"/>
    </div>
    
</template>

<script>
import changePasswd from './changePasswd.vue'
import { dateFormat } from "../../scripts/until";

export default {
  name: "headDate",
  data: function() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (this.ruleForm.password !== "Hgsl@Txk@123") {
        callback(new Error("密码错误"));
      } else {
        callback();
      }
    };
    return {
      temp: "",
      weatherUrl: "",
      dialogFormVisible: false,
      ruleForm: {
        password: ""
      },
      rules: {
        password: [
          {
            required: true,
            validator: validatePass,
            trigger: "blur"
          }
        ]
      },
      formLabelWidth: "80px",
      showChangePasswd: false
    };
  },
  components: {
    changePasswd
  },
  computed: {
    date() {
      var d = new Date();
      var str = `${dateFormat(d, "ymdc")} ${dateFormat(d, "w")}`;
      return str;
    },
    currentUser() {
      return localStorage;
    },
    showManage() {
      return localStorage.username == "潘清明" ||
        localStorage.username == "张博" ||
        localStorage.username == "倪潮" ||
        localStorage.username == "王胜男" ||
        localStorage.username == "王元江"
        ? true
        : false;
    }
  },
  methods: {
    loginShow() {
      localStorage.clear();
      this.$router.push("/login");
    },
    userDetail() {
      this.$router.push("/selfDetail");
    },
    manageSystem() {
      this.dialogFormVisible = true;
    },
    logout() {
      this.$$http("USER_LOGOUT").then(data => {
            localStorage.clear();
            this.$router.push("/login");
      });

    },
    backHome() {
      this.$router.push("/");
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dialogFormVisible = false;
    },
    dologin(formName, event) {
      console.log(event);
      event.stopPropagation();
      console.log(this.ruleForm.password);
      this.$refs[formName].validate(valid => {
        if (valid) {
          // 开发环境
          // window.open(`http://localhost:8080/login/${localStorage.userid}`);
          // 部署环境
          window.open(`http://10.42.113.26:8100/login/${localStorage.userid}`);
          this.resetForm(formName);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
    // show(){
    //     console.log(event.keyCode);
    //     dologin('ruleForm');
    // }
  },
  mounted() {
    this.$$http("GET_HG_WEATHER").then(data => {
      this.weatherUrl = "http://www.nmc.cn" + data.station.url;
      let weather = data.weather;
      this.temp = `当前：${weather.temperature}℃        ${weather.info}`;
    });
  }
};
</script>

<style lang="scss">
.head-date-wrapper {
  .info {
    padding-top: 10px;
    .user {
      cursor: pointer;
      color: #0000ee;
      a {
        color: #2d2f33;
      }
    }
  }
  .logo {
    width: 471px;
    height: 60px;
    background: url("/src/assets/img/logo.png");
    background-size: cover;
    margin: 20px 0 25px 0;
    cursor: pointer;
  }
  .weather {
    a {
      text-decoration: none;
    }
  }
}
</style>